<template>
  <div class="container">
    <div class="loading-box">
      <p>好图表 好运维</p>
      <div class="loader">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

    <div class="box">
      <div class="header-container" style="width: 100%">
        <img class="header-bg" src="../image/kanban/h_bg.png" alt="" />
      </div>
      <div class="cell" style="margin-top: -1.8rem; z-index: 2">
        <span class="cell-title">零售营销</span>
        <div class="cell-grid">
          <div class="cell-grid-item">
            <img src="../image/kanban/6.png" alt="" />
            <span>场景金融</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/5.png" alt="" />
            <span>客户体验</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/4.png" alt="" />
            <span>场景监控</span>
          </div>
        </div>
      </div>
      <div class="cell">
        <span class="cell-title">零售贷款</span>
        <div class="cell-grid">
          <div class="cell-grid-item">
            <img src="../image/kanban/3.png" alt="" />
            <span>贷款申请</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/2.png" alt="" />
            <span>放款申请</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/1.png" alt="" />
            <span>还款申请</span>
          </div>
        </div>
      </div>
      <div class="cell">
        <span class="cell-title">对公业务</span>
        <div class="cell-grid">
          <div class="cell-grid-item">
            <img src="../image/kanban/1.png" alt="" />
            <span>场景金融</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/2.png" alt="" />
            <span>场景金融</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/3.png" alt="" />
            <span>场景金融</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/4.png" alt="" />
            <span>场景金融</span>
          </div>
        </div>
      </div>
      <div class="cell">
        <span class="cell-title">对公业务</span>
        <div class="cell-grid">
          <div class="cell-grid-item">
            <img src="../image/kanban/1.png" alt="" />
            <span>场景金融</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/2.png" alt="" />
            <span>场景金融</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/3.png" alt="" />
            <span>场景金融</span>
          </div>
          <div class="cell-grid-item">
            <img src="../image/kanban/4.png" alt="" />
            <span>场景金融</span>
          </div>
        </div>
      </div>
    </div>
    <div class="header-container-head">
      <span class="header-title">数据图标展示平台</span>
      <span class="fa fa-chevron-left icon left-icon"></span>
      <span class="fa fa-ellipsis-v icon right-icon"></span>
    </div>
  </div>
</template>


<script>
import $ from "jquery";

// import axios from "axios";

export default {
  name: "mainMenu",
  components: {},
  data() {
    return {
      // popLoadingShow: false, //loading框
      // toastText: "",
      // toastShow: false, //toast组件

      dragResistance: 0.6,
      deltaY: 0,
      maxDragY: 80,
      minDragY: 50,
      indicating: false,
      startOffsetTop: 0,
    };
  },

  beforeRouteLeave(to, from, next) {
    if (to.name !== "login") {
      this.isBack = true;
    } else {
    }
    next();
  },
  created() {
    this.$nextTick(function () {
      let _this = this;
      $("html,body").css({
        overflow: "hidden",
        height: "100%",
        position: "fixed",
        left: 0,
        top: 0,
      });
      this.startOffsetTop = $(".cell").offset().top;

      $(".header-title").css("opacity", 0);
      document.getElementsByClassName("box")[0].addEventListener(
        "scroll",
        function () {
          var headerP =
            ($(".cell").offset().top -
              2.45 * document.documentElement.style.fontSize.substring(0, 2)) /
            (_this.startOffsetTop -
              2.45 * document.documentElement.style.fontSize.substring(0, 2));
          // console.log("-------11111--------", headerP);
          $(".header-container-head").css(
            "backgroundColor",
            "rgba(34, 51, 107," + (1 - headerP) + ")"
          );
          $(".header-bg").css("opacity", headerP + "");
          $(".header-title").css("opacity", 1 - headerP + "");
        },
        false
      );
      $(document).on("mousedown touchstart", ".box", function (e) {
        console.log("click touch", _this.indicating);
        if (_this.indicating) return;
        if ($(".box").scrollTop() !== 0) {
          return;
        }
        let startY = e.pageY || e.originalEvent.touches[0].pageY;
        $(document).on("mousemove touchmove", function (e) {
          e.preventDefault();
          var y = e.pageY || e.originalEvent.touches[0].pageY;
          _this.deltaY = (y - startY) * _this.dragResistance;
          if (_this.deltaY < 0) {
            _this.deltaY = 0;
          } else {
            $(".box").css({
              overflow: "hidden",
            });
          }
          if (_this.deltaY > _this.maxDragY) _this.deltaY = _this.maxDragY;
          var progress = _this.deltaY / _this.maxDragY;
          // console.log('-----progress----', progress);
          $(".box").css("transform", "translate3d(0," + _this.deltaY + "px,0)");
          $(".loading-box").css(
            "transform",
            "translate3d(0," + (_this.deltaY - 80) + "px,0)"
          );
          $(".loader div:nth-child(1)").css(
            "transform",
            "translate3d(-" + 200 * progress + "%,0,0)"
          );
          $(".loader div:nth-child(3)").css(
            "transform",
            "translate3d(" + 200 * progress + "%,0,0)"
          );
          $(".loader div:nth-child(1)").css("opacity", progress + "");
          $(".loader div:nth-child(2)").css("opacity", progress + "");
          $(".loader div:nth-child(3)").css("opacity", progress + "");

          $(document).on("mouseup touchend", function () {
            $(document).off("mousemove touchmove mouseup touchend");
            if (!_this.deltaY) return;
            _this.indicating = true;

            if (_this.deltaY >= _this.minDragY) {
              $(".loader div:nth-child(1)").addClass("loadAni1");
              $(".loader div:nth-child(2)").addClass("loadAni");
              $(".loader div:nth-child(3)").addClass("loadAni2");
            } else {
              $(".box").css("transform", "translate3d(0," + 0 + "px,0)");
              $(".loading-box").css("transform", "translate3d(0,-80px,0)");
            }

            setTimeout(function () {
              $(".loader div:nth-child(1)").removeClass("loadAni1");
              $(".loader div:nth-child(2)").removeClass("loadAni");
              $(".loader div:nth-child(3)").removeClass("loadAni2");
              $(".box").css("transform", "translate3d(0," + 0 + "px,0)");
              $(".loading-box").css("transform", "translate3d(0," + "-80px,0)");

              $(".box").css({
                overflow: "auto",
              });
              _this.indicating = false;
              _this.deltaY = 0;
            }, 2 * 1000);
          });
        });
      });
    });
  },

  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.toast {
  position: fixed;
  z-index: 20000;
  left: 50%;
  bottom: 15%;
  transition: all 0.5s;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  border-radius: 0.2rem;
  color: #fff;
  font-size: 0.66rem;
  background: rgba(17, 17, 17, 0.7);
  min-height: 1rem;
  line-height: 1rem;
  vertical-align: middle;
  padding: 0.2rem 0.4rem;
  -webkit-animation: dialog-fadein 0.4s;
  animation: dialog-fadein 0.5s;
}
.container {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgb(21, 34, 88);
  overflow: hidden;
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #e9e9e9;
  box-sizing: border-box;
  overflow: auto;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.1s ease;
  z-index: 2;
  .header-container {
    // position: relative;
  }
}
.header-container-head {
  height: 2rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 3;
  justify-content: center;
  span {
    font-size: 0.66rem;
    color: #fdfbfc;
  }
  .icon {
    color: white;
    position: absolute;
    font-size: 1rem;
  }
  .left-icon {
    left: 0.8rem;
  }
  .right-icon {
    right: 0.8rem;
  }
}
.header-bg {
  width: 100%;
  height: 100vw * (400/750);
  background-color: rgb(21, 34, 88);
  transition: opacity 0.3s;
}
.cell {
  margin: 0.4rem 0.4rem;
  min-height: 3rem;
  border-radius: 0.4rem;
  background-color: white;
  position: relative;
  padding: 0.4rem 0.6rem;
  box-sizing: border-box;
  .cell-title {
    font-size: 0.72rem;
    font-weight: 400;
  }
  .cell-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    .cell-grid-item {
      width: 33%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0.6rem 0;

      img {
        width: 1.3rem;
        height: 1.3rem;
      }
      span {
        font-size: 0.56rem;
        margin-top: 0.4rem;
      }
    }
  }
}
.loading-box {
  width: 100%;
  height: 80px;
  background-color: rgb(21, 34, 88);
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  position: absolute;
  will-change: transform;
  transition: transform 0.1s ease;
  transform: translate3d(0, -80px, 0);
  flex-direction: column;
  background-image: url("../image/kanban/h_h_bg.png");
  background-size: 100% 100%;
  p {
    text-align: center;
    margin: 0;
    font-weight: bold;
  }
  .loader {
    display: flex;
    justify-content: center;
    background: transparent;
  }

  .loader > div {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffffff;
    // margin: 0.4rem 0.2rem;
    border-radius: 50%;
  }
  .loadAni {
    animation: load 0.6s infinite alternate;
  }
  .loadAni1 {
    animation: load1 0.6s infinite alternate;
  }
  .loadAni2 {
    animation: load2 0.6s infinite alternate;
  }
  @keyframes load1 {
    to {
      opacity: 0.2;
      transform: translate3d(-200%, -6px, 0);
    }
  }
  @keyframes load {
    to {
      opacity: 0.2;
      transform: translate3d(0, -6px, 0);
    }
  }
  @keyframes load2 {
    to {
      opacity: 0.2;
      transform: translate3d(200%, -6px, 0);
    }
  }
  @keyframes load {
    to {
      opacity: 0.2;
      transform: translate3d(0, -6px, 0);
    }
  }
  .loader > div:nth-child(2) {
    animation-delay: 0.2s;
  }
  .loader > div:nth-child(3) {
    animation-delay: 0.4s;
  }
}
</style>